<template>
      <div id="section1" class="section">
        <h2 style="margin-bottom: 0px; color: #2196f3;">系统账户信息</h2>
        <div class="button-container">
          <el-button type="primary" @click="handleNew">添加</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%; height: auto;" :cell-padding="0">
          <el-table-column prop="username" label="用户名称"></el-table-column>
          <el-table-column prop="role" label="用户身份"></el-table-column>
<!--          <el-table-column prop="propertyid" label="用户权限编号"></el-table-column>-->
          <el-table-column prop="password" label="用户密码"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <!--新增信息的表单-->
    <el-dialog title="新增用户" v-model="NewArtistVisible" :visible.sync="NewArtistVisible" width="50%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="newFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="用户权限" prop="role">
        <el-select v-model="ruleForm.role" placeholder="请选择用户权限">
          <el-option label="系统管理员" value="系统管理员"></el-option>
          <el-option label="公司运营" value="公司运营"></el-option>
          <el-option label="经纪人" value="经纪人"></el-option>
          <el-option label="艺人" value="艺人"></el-option>
          <el-option label="经纪人管理员" value="经纪人管理员"></el-option>
          <el-option label="场地管理员" value="场地管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('newFormRef')">立即创建</el-button>
        <el-button @click="resetForm('newFormRef')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
    <!--修改信息的表单-->
    <el-dialog title="修改用户信息" v-model="EditArtistVisible" :visible.sync="EditArtistVisible" width="50%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="ruleForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户权限" prop="role">
        <el-select v-model="ruleForm.role" placeholder="请选择用户权限">
          <el-option label="系统管理员" value="系统管理员"></el-option>
          <el-option label="公司运营" value="公司运营"></el-option>
          <el-option label="经纪人" value="经纪人"></el-option>
          <el-option label="艺人" value="艺人"></el-option>
          <el-option label="经纪人管理员" value="经纪人管理员"></el-option>
          <el-option label="场地管理员" value="场地管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('editFormRef')">立即修改</el-button>
      </el-form-item>
      
      </el-form>
    </el-dialog>
</template>

<script>
import axios from 'axios'
import request from '@/utils/request'
import * as echarts from 'echarts'
import {
  ChatDotRound,
  ArrowUp,
  ArrowDown,
  More,
  Money,
  User,
  Star,
  Calendar,
  TrendCharts,
  Histogram,
  DataLine,
  Timer,
  Check,
  Delete
} from '@element-plus/icons-vue';
import { markRaw } from 'vue';
export default {
  data()
  {
    return {
      tableData: [],
      ruleForm: {
        username:"",
        role:'',
        password:''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择用户权限', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
        ]

      },
      NewArtistVisible: false,
      EditArtistVisible: false,
    }

  },
  methods:{
    //处理修改表单内容
     handleEdit(row) {
      this.editedScheduleName = row.username; // 记录当前编辑的索引
      this.ruleForm = { ...row }// 复制当前行数据到表单
      this.EditArtistVisible = true; // 打开对话框
      // 重置表单校验状态
      if (this.$refs.editFormRef) {
        this.$refs.editFormRef.resetFields()
      }
    },
    //处理新增表单内容
    handleNew() {
      this.value = [0, 132]
      this.editedScheduleName ="";
      this.ruleForm = {
        username:"",
        role:'',
        password:''
      }
      this.NewArtistVisible = true;
    },
    //处理删除表单内容
    handleDelete(row) {
      this.$confirm(`确定要删除用户"${row.username}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/deleteUserList/${row.username}`).then(res => {
          if (res.data.code === 200) {
            // 删除成功，刷新数据
            this.$message.success('删除成功');
            this.getUserList()
          } else {
            this.$message.success('删除失败');
          }
        }).catch(err => {
          console.error('删除行程失败:', err)
          this.$message.error('删除行程失败')
        })
      }).catch(() => { });
    },
    getUserList() {
      request.get('/getUserList').then(res => {
        console.log(res)
        this.tableData = res.data.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      //     switch (this.ruleForm.property) {
      //     case '系统管理员':
      //       this.ruleForm.propertyid = '1';
      //     break;
      //     case '公司高层':
      //       this.ruleForm.propertyid = '2';
      //     break;
      //     case '经纪人':
      //       this.ruleForm.propertyid = '3';
      //     break;
      //     case '艺人':
      //       this.ruleForm.propertyid = '4';
      //     break;
      //     case '经纪人管理员':
      //       this.ruleForm.propertyid = '5';
      //     break;
      //     case '场地管理员':
      //       this.ruleForm.propertyid = '6';
      //     break;
      //   default:
      //     this.ruleForm.propertyid = '';
      // }
          if (this.editedScheduleName !== "") {
            request.put(`/updateUserList/${this.editedScheduleName}`, this.ruleForm).then(res => {
              if (res.data.code === 200) {
                // 更新成功，刷新数据
                this.$message.success('更新成功')
                this.getUserList()
                // 关闭对话框
                this.EditArtistVisible = false
                this.ruleForm = {
                  username:"",
                  role:'',
                  password:''
                }
              } else {
                this.$message.error(res.data.msg || '修改艺人失败')
              }
            }).catch(err => {
              console.error('更新艺人失败:', err)
              this.$message.error('更新艺人失败')
            })
          } else {
            request.post('/addUserList', this.ruleForm).then(res => {
              if (res.data.code === 200) {
                // 添加成功，刷新数据
                this.$message.success('添加艺人成功')
                this.getUserList()
                // 关闭对话框
                this.NewArtistVisible = false
              } else {
                this.$message.error('添加艺人失败')
              }
            }).catch(err => {
              console.error('添加艺人失败:', err)
              this.$message.error('添加艺人失败')
            })
          }


        } else {
          console.log('提交失败!!');
          return false;
        }
      });
    },
    //重置行程更改的表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleWorkClose(done) {
      this.resetWorkForm();
      done();
    },
  },
  mounted() { 
    this.getUserList() 
  },

  
}

</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: flex-end;
  /* 将按钮对齐到容器的最右边 */
  margin-bottom: 10px;
  /* 可选：添加一些底部边距，以便按钮和表格之间有一些空间 */
}
</style>